<template>
  <div class="ticketList-box">
    <div class="order-seach-box">
      <el-form ref="form" class="el-form-box" :model="form" label-width="120px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="订单号">
              <el-input maxlength="100" placeholder="请输入" v-model.trim="form.orderCode"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="姓名">
              <el-input maxlength="100" placeholder="请输入" v-model.trim="form.consignee"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="手机号">
              <el-input maxlength="100" placeholder="请输入" v-model.trim="form.phoneNumber"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发票抬头">
              <el-select style="width:100%" v-model="form.headerType" placeholder="请选择">
                <el-option key="0" label="个人/非企业单位" value="0"></el-option>
                <el-option key="1" label="企业单位" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="用户备注">
              <el-input maxlength="100" placeholder="请输入" v-model.trim="form.remark"></el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="8">
            <el-form-item label="申请时间">
              <el-date-picker style=" width: 100%;" v-model="form.gmtCreate" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" align="left">
              </el-date-picker>
            </el-form-item>
          </el-col> -->
          <el-col :span="8">
            <el-form-item label="状态">
              <el-select style="width:100%" v-model="form.status" placeholder="请选择">
                <el-option key="0" label="已申请" value="0"></el-option>
                <el-option key="1" label="开票中" value="1"></el-option>
                <el-option key="2" label="开票成功" value="2"></el-option>
                <el-option key="3" label="已发货" value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-button @click="getFunList()" icon="el-icon-search" style="margin-left:126px" type="primary">搜索</el-button>
            <el-button @click="clearList()">清空</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="order-con-box">
      <div class="ticketList-top-btn">
        <el-button @click="tuiMoney()" icon="el-icon-s-goods">发货</el-button>
        <el-button v-if="sumPage" @click="leadOut()" icon="el-icon-download">导出</el-button>
      </div>
      <el-table @selection-change="handleSelectionChange" v-loading="sreachLoding" element-loading-text="拼命加载中" ref="multipleTable" empty-text="暂无数据信息~" :data="table" border style="width: 100%">
        <el-table-column align="center" type="selection" width="60">
        </el-table-column>
        <el-table-column align="center" label="收货信息">
          <template slot-scope="scope" align="center">
            <p class="cellPLeft">
              <span>{{scope.row.consignee}} </span>
              <span>{{scope.row.phoneNumber}}</span>
            </p>
            <p class="cellPLeft">
              <span>{{scope.row.address}}</span>
            </p>
          </template>
        </el-table-column>
        <el-table-column align="center" label="发票抬头">
          <template slot-scope="scope" align="center">
            <p class="cellPLeft">
              {{scope.row.headerType==1?'企业单位':'个人/非企业单位'}}
            </p>
            <p v-if="scope.row.headerType==1" class="cellPLeft">
              <span>企业名称:{{scope.row.headerName}}</span>
              <span>企业税号:{{scope.row.taxNum}}</span>
            </p>
            <p v-else class="cellPLeft">
              <span>个人</span>
            </p>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="totalPrice" label="金额">
          <template slot-scope="scope" align="center">
            <p style=" text-align: center;" class="cellPLeft">
              {{scope.row.totalPrice}}元
            </p>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="remark" label="用户备注"></el-table-column>
        <el-table-column align="center" label="发票类型">
          <template align="center">
            <p style=" text-align: center;" class="cellPLeft">
              增值税普通发票
            </p>
          </template>
        </el-table-column>
        <el-table-column align="center" label="申请时间">
          <template slot-scope="scope" align="center">
            <p style=" text-align: center;" class="cellPLeft">
              {{$moment(scope.row.gmtCreate,"YYYY-MM-DD HH:mm" )}}
            </p>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="orderCode" label="门票订单号"></el-table-column>
        <el-table-column width="100" align="center" label="状态">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.status==3">已发货</el-tag>
            <el-tag v-if="scope.row.status==2">开票成功</el-tag>
            <el-tag v-if="scope.row.status==1">开票中</el-tag>
            <el-tag type="warning" v-if="scope.row.status==0">已申请</el-tag>
            <el-tag type="danger" v-if="scope.row.status==-1">申请失败</el-tag>
            <el-tag v-if="scope.row.status==-2">未申请</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-if="sumPage" class="pagination-box">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="thisPage" :page-sizes="$pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="sumPage">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import pickerOptions from "./pickerOptions.js";
export default {
  data() {
    return {
      sumPage: 0, //一共有多少条
      thisPage: 1, //当前页
      pageSize: 10, //每页多少条
      sreachLoding: false, //搜索loding
      table: [],
      form: {
        //搜索表单
        orderCode: "",
        consignee: "",
        phoneNumber: "",
        headerType: "",
        remark: "",
        gmtCreate: [],
        status: ""
      },
      pickerOptions: pickerOptions,
      saveSelect: [], //保存选择结果
      multipleSelection: [] // 选择结果
    };
  },
  computed: {
    thisActivityId() {
      return this.$store.state.activityId;
    }
  },
  watch: {
    thisActivityId(a, b) {
      // console.log("修改前为：" + a);
      // console.log("修改后为：" + b);
      this.getFunList();
    }
  },
  created() {
    this.getFunList();
  },
  methods: {
    // 查询数据
    async getFunList() {
      delete this.form.gmtCreate;
      this.sreachLoding = true;
      let subData = {
        activityId: this.$store.state.activityId,
        start: this.thisPage - 1,
        size: this.pageSize,
        ...this.form
      };
      console.log(subData);
      this.$http
        .post("/api/isv/invoice/queryInvoiceByPagination", subData)
        .then(
          res => {
            this.sreachLoding = false;
            if (res.data.success) {
              this.table = res.data.result.data || [];
              this.sumPage = res.data.result.total;
            } else {
              this.$message({
                message: res.data.errorMsg || "数据获取失败",
                type: "warning"
              });
            }
          },
          err => {
            this.sreachLoding = false;
            this.$message.error("服务器出小差了");
          }
        );
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getFunList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.thisPage = val;
      this.getFunList();
    },
    clearList() {
      this.form = {
        //搜索表单
        orderCode: "",
        consignee: "",
        phoneNumber: "",
        headerType: "",
        remark: "",
        gmtCreate: [],
        status: ""
      };
      this.getFunList();
    },
    // 发货退钱
    tuiMoney() {
      if (this.multipleSelection.length == 0) {
        this.$message({
          message: "请至少选择一项！",
          type: "warning"
        });
        return;
      }
      let ids = [];
      this.multipleSelection.map(item => {
        ids.push(Number(item.id));
      });
      this.$confirm("您确定是否要进行发货, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http.post("/api/isv/invoice/deliver", ids).then(
            res => {
              this.sreachLoding = false;
              if (res.data.success) {
                this.$message({
                  message: "发货成功",
                  type: "success"
                });
                this.getFunList();
              } else {
                this.$message({
                  message: res.data.errorMsg || "数据修改失败",
                  type: "warning"
                });
              }
            },
            err => {
              this.sreachLoding = false;
              this.$message.error("服务器出小差了");
            }
          );
        })
        .catch(() => {});
    },
    // 导出
    leadOut() {
      this.sreachLoding = true;
      this.$http
        .post(
          "/api/isv/invoice/exportInvoice",
          {
            orderCode: "",
            consignee: "",
            phoneNumber: "",
            headerType: "",
            remark: "",
            // gmtCreate: [],
            status: "",
            activityId: this.$store.state.activityId
          },
          {
            responseType: "blob"
          }
        )
        .then(
          res => {
            console.log(res.data);
            this.sreachLoding = false;
            if (res.data.success === false) {
              this.$message({
                message: res.data.errorMsg || "导出失败",
                type: "warning"
              });
              return;
            }
            // const filename = decodeURI(
            //   res.headers["content-disposition"].split(";")[1].split("=")[1]
            // );
            // console.log(filename);
            let url = window.URL.createObjectURL(new Blob([res.data]));
            let link = document.createElement("a");
            link.style.display = "none";
            link.href = url;
            link.setAttribute("download", "发票.xlsx");
            document.body.appendChild(link);
            link.click();
            this.$message({
              message: "导出成功",
              type: "success"
            });
          },
          err => {
            this.sreachLoding = false;
            this.$message.error("服务器出小差了");
          }
        );
    },
    // handleSelectionChange(val) {
    //   this.saveSelect = this.multipleSelection;
    //   this.multipleSelection = [];
    //   let isClear = false;
    //   for (let i = 0; i < val.length; i++) {
    //     if (val[i].status == "0") {
    //       this.multipleSelection.push(val[i]);
    //     } else {
    //       isClear = true;
    //     }
    //   }
    //   if (isClear) {
    //     this.toggleSelection();
    //   }
    // },
    // toggleSelection() {
    //   this.$refs.multipleTable.clearSelection();
    //   this.saveSelect.forEach(row => {
    //     this.$refs.multipleTable.toggleRowSelection(row);
    //   });
    // }
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  }
};
</script>
<style scoped>
.ticketList-box {
  width: 100%;
  height: auto;
}
.order-seach-box {
  width: 100%;
  height: auto;
  /* min-height: 200px; */
  background: #fff;
  border-radius: 6px;
  padding: 26px;
}
.order-con-box {
  width: 100%;
  height: auto;
  min-height: 200px;
  background: #fff;
  border-radius: 6px;
  padding: 26px;
  margin-top: 18px;
}
.ticketList-top-btn {
  width: 100%;
  /* border: 1px solid red; */
  height: auto;
  margin: 10px 0px 20px 0px;
  display: flex;
  -webkit-display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
}
.cellPLeft {
  text-align: left;
  width: 100%;
}
.pagination-box {
  width: 100%;
  height: auto;
  padding: 16px;
  background: #fff;
  text-align: right;
}
</style>
